<template>


 <div>
    <el-form
            label-position="right"
            label-width="100px"
            :model="security"
            style="max-width: 460px">

            <el-form-item label-width="330px" label="宿舍安全问题检查"/>

            <el-form-item label="有无违章电器" label-width="330px">
                        <el-select v-model="security.isElectricAppliance"
                        placeholder="请选择"
                        style="width: 240px"
                        >
                        <el-option label="有" value="1"/>
                        <el-option label="没有" value="0"/>
                        </el-select>
            </el-form-item>

            <el-form-item label="有无蜡烛、酒精灯等明火设备" label-width="330px">
                        <el-select v-model="security.isLight"
                        placeholder="请选择"
                        style="width: 240px"
                        >
                        <el-option label="有" value="1"/>
                        <el-option label="没有" value="0"/>
                        </el-select>
            </el-form-item>


            <el-form-item label="有无有毒、有害、易燃、易爆等危险品" label-width="330px">
                        <el-select v-model="security.isPoisonous"
                        placeholder="请选择"
                        style="width: 240px"
                        >
                        <el-option label="有" value="1"/>
                        <el-option label="没有" value="0"/>
                        </el-select>
            </el-form-item>

            <el-form-item label="有无管制刀具、各类仿真枪具等危险器具" label-width="330px">
                        <el-select v-model="security.isKnife"
                        placeholder="请选择"
                        style="width: 240px"
                        >
                        <el-option label="有" value="1"/>
                        <el-option label="没有" value="0"/>
                        </el-select>
            </el-form-item>


            <el-form-item label="宿舍门窗是否悬挂或张贴遮盖物，床铺无帷幔" label-width="330px">
                        <el-select v-model="security.isBed"
                        placeholder="请选择"
                        style="width: 240px"
                        >
                        <el-option label="有" value="1"/>
                        <el-option label="没有" value="0"/>
                        </el-select>
            </el-form-item>


            <el-form-item label="有无电竞椅、台式电脑及影响人员流通的大件家具" label-width="330px">
                        <el-select v-model="security.isComputer"
                        placeholder="请选择"
                        style="width: 240px"
                        >
                        <el-option label="有" value="1"/>
                        <el-option label="没有" value="0"/>
                        </el-select>
            </el-form-item>

            <el-form-item label="有无蜡烛、酒精灯等明火设备" label-width="330px">
                        <el-select v-model="security.isLight"
                        placeholder="请选择"
                        style="width: 240px"
                        >
                        <el-option label="有" value="1"/>
                        <el-option label="没有" value="0"/>
                        </el-select>
            </el-form-item>


            <el-form-item label="违规内容" label-width="330px">
                <el-input type="text" v-model="security.content"/>
            </el-form-item>

            <el-form-item label="上传违规图片" label-width="330px">
                <template>
                <el-upload
                    action="http://localhost:30000/upload"
                    list-type="picture-card"
                    :on-success="handleAvatarSuccess"
                >
                    <el-icon><Plus /></el-icon>
                </el-upload>

                <el-dialog v-model="dialogVisible">
                    <img w-full :src="security.photo" alt="Preview Image" />
                </el-dialog>
                </template>

            </el-form-item>

            <el-form-item  label-width="330px">
                <el-button @click="upload()">上传</el-button>
            </el-form-item>

    </el-form>
 </div>


</template>
<script>
import htmlToPdf from '@/script/htmlToPdf'
export default {

  data () {
    return {
      security: {},
      securities: [],
      rectification: {},
      user: {},
      role: '',
    }
  },
  created () {

    // 获得角色信息
    this.role = window.sessionStorage.getItem('role')

    // 获得用户信息
    this.user = JSON.parse(window.sessionStorage.getItem('user'))

    this.security.dormitoryId = window.sessionStorage.getItem('d_id')

    // 查看宿舍安全问题
    this.$http.get('/dormitory/seurity/' + window.sessionStorage.getItem('d_id')).then(response => {
        this.securities = response.data
    })


},
  methods: {

    // 处理图片上传成功的响应事件
    handleAvatarSuccess(file, fileList) {
        this.security.photo = file
    },

    // 导出Pdf
    exportPdf(id,time) {
       htmlToPdf.downloadPDF(document.querySelector("#mypdf" + id), "宿舍安全情况-" + time);
    },

    upload() {
        this.$http.post('/securityQuestion', this.security).then(response => {
            this.$message({
                type: 'success',
                message: '上传成功!'
            })
        this.$router.push('/home/dormitory/user')
        })
    }
  }
}
</script>
<style>

  .my-label {
    background: #E1F3D8;
  }

  .my-content {
    background: #FDE2E2;
  }

</style>